import styled from "styled-components";

import smallBG from "../../../../assets/image/LaneMonitoring/smallBG.png";
import active from "../../../../assets/image/LaneMonitoring/lightSwitch.png";
import unactive from "../../../../assets/image/LaneMonitoring/graySwitch.png";
import dizhuo2 from "../../../../assets/image/LaneMonitoring/dizuo2.png";
import inputBg from "../../../../assets/image/LaneMonitoring/input.png";
import btnL from "../../../../assets/image/LaneMonitoring/btnL.png";
import btnG from "../../../../assets/image/LaneMonitoring/btnG.png";
import bigbtn from "../../../../assets/image/LaneMonitoring/bigBtn.png";
import bigbtn2 from "../../../../assets/image/LaneMonitoring/bigBtn2.png";
import lastSmallBG from "../../../../assets/image/LaneMonitoring/lastsmallBG.png";
import shoutongtaigan from "../../../../assets/image/LaneMonitoring/shoutongtaigan.png";
import zhuangchemoshi_bg from "../../../../assets/image/LaneMonitoring/zhuangchemoshi_bg.png";
import changKuang from "../../../../assets/image/LaneMonitoring/chang_kuang.png";

export const CenterBottomItem = styled.div`
  width: 49%;
  height: 100%;
  background: url(${smallBG}) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 26.49%;
    font-size: 2rem;
    margin-left: 5.5rem;
    font-weight: bold;
    line-height: 200%;
    color: #ffffff;
    background: linear-gradient(
      0deg,
      #79c5ff 0%,
      #ffffff 59.8388671875%,
      #ffffff 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .caozuo_box {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* flex-direction: column; */
    padding: 0 2rem;
    .shoudongtaigan_btn {
      width: 16.8rem;
      height: 8rem;
      background: url(${shoutongtaigan}) no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: MiSans;
      font-weight: 400;
      font-size: 4rem;
      color: #fdffff;
      /* margin-bottom: 2rem; */
    }
    .zhuangchemoshi_btn {
      width: 25rem;
      height: 5rem;
      background: url(${zhuangchemoshi_bg}) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* flex-direction: column; */
      font-family: MiSans;
      font-weight: 400;
      font-size: 2rem;
      color: #92b2d0;
      /* .ant-switch-inner {
        .ant-switch-inner-checked {
          font-size: 2.4rem !important;
        }
        .ant-switch-inner-unchecked {
          font-size: 2.4rem !important;
        }
      } */
    }
  }
`;
export const CenterBottomItemYYZYX = styled.div`
  width: 49%;
  height: 100%;
  background: url(${smallBG}) no-repeat;
  background-size: 100% 100%;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 26.49%;
    font-size: 2rem;
    margin-left: 5.5rem;
    font-weight: bold;
    line-height: 200%;
    .text-title {
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #79c5ff 0%,
        #ffffff 59.8388671875%,
        #ffffff 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .button_box {
      width: 8.8rem;
      height: 3.6rem;
      background: linear-gradient(0deg, rgba(60, 139, 255, 0.35) 0%);
      border-radius: 1rem;
      border: 0.2rem solid;
      border-image: linear-gradient(0deg, #1b477d) 10 10;
      font-family: MiSans;
      font-weight: 400;
      font-size: 1.6rem;
      color: #92b2d0;
      text-shadow: 0px 0.4rem 0.6rem rgba(2, 41, 62, 0.84);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }

  .liquidFillBox {
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    :nth-child(1) {
      width: 49%;
      box-sizing: border-box;
    }
    .styleBox {
      padding: 2rem;
    }
    .smallTitle {
      font-size: 1.4rem;
      width: 4rem;
      margin-bottom: 1rem;
      color: #f5f6f9;
      transform: translateX(-1rem);
    }
    .styleNum {
      width: 5rem;
      font-size: 2rem;
      color: #24cafd;
      font-weight: bold;
    }
    .styleNum2 {
      font-size: 2rem;
      color: #fee21d;
      font-weight: bold;
    }
  }
`;
export const CenterBottomItemPCZSD = styled.div`
  width: 100%;
  height: 49%;
  background: url(${smallBG}) no-repeat;
  background-size: 100% 100%;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 26.49%;
    font-size: 2rem;
    margin-left: 5.5rem;
    font-weight: bold;
    line-height: 200%;
    .text-title {
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #79c5ff 0%,
        #ffffff 59.8388671875%,
        #ffffff 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .switchBox {
      width: 10rem;
      height: 98%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-right: 2rem;
      transform: translateY(1px);
      .dun {
        font-size: 1.6rem;
        cursor: pointer;
        width: 4.4rem;
        height: 4rem;
        text-align: center;
      }
      .active {
        background: url(${active}) no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
      .unactive {
        background: url(${unactive}) no-repeat;
        background-size: 100% 100%;
        color: #5c6e7f;
      }
    }
  }
  .yyz-content {
    width: 100%;
    height: 73.51%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .yyz-item-one {
      width: 12rem;
      height: 8.6rem;
      font-size: 2rem;
      text-align: center;
      background: url(${dizhuo2}) no-repeat;
      background-size: 100% 100%;
      margin: 1rem 3rem 0rem 3rem;
      position: relative;
      .yyz-title {
        font-size: 1.2rem;
        color: #92b2d0;
        position: absolute;
        top: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .yyz-value {
        width: 100%;
        font-size: 2.8rem;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(0deg, #ffffff 0%, #01befc 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .yyz-item {
      width: 55%;
      /* height: 50%; */
      height: 100%;
      display: flex;
      /* align-items: center; */
      flex-direction: column;
      justify-content: center;

      .yyz-title {
        font-size: 1.4rem;
        color: #92b2d0;
        margin: 0.5rem 2rem 1rem 0.3rem;
      }
      .inputBox {
        width: 18rem;
        height: 4.4rem;
        background: url(${inputBg}) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .inputLeft {
          width: 11rem;
          background: none;
          border: none;
          outline: none;
          color: #5697cc;
        }
        .inputLeft::placeholder {
          color: #5697cc;
        }
        .inputRight {
          width: 6rem;
          font-size: 1.4rem;
          color: #fff;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
`;
export const CenterBottomItemKQPSZ = styled.div`
  width: 100%;
  height: 49%;
  background: url(${smallBG}) no-repeat;
  background-size: 100% 100%;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 26.49%;
    font-size: 2rem;
    margin-left: 5.5rem;
    font-weight: bold;
    line-height: 200%;
    color: #ffffff;
    background: linear-gradient(
      0deg,
      #79c5ff 0%,
      #ffffff 59.8388671875%,
      #ffffff 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .kongqipao_btn_box {
    height: 4rem;
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    .kongqipao_btn {
      width: 10rem;
      height: 4rem;
      background: rgba(19, 35, 71, 0.6);
      border-radius: 1rem;
      border: 0.1rem solid #1d466e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: MiSans;
      font-weight: 400;
      font-size: 1.6rem;
      color: #92b2d0;
      cursor: pointer;
      &:hover {
        background: linear-gradient(0deg, rgba(48, 115, 229, 0.6) 0%);
      }
    }
    .active {
      background: linear-gradient(0deg, rgba(48, 115, 229, 0.8) 0%);
      border-radius: 1rem;
      border: 0.1rem solid #3f87d1;
      font-family: MiSans;
      font-weight: 400;
      font-size: 1.6rem;
      color: #cfe8ff;
    }
  }
  .shezhi_input_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    .shezhi_input_title {
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 1.4rem;
      color: #92b2d0;
      margin-right: 2rem;
    }
    .inputBox {
      width: 18rem;
      height: 4.4rem;
      background: url(${inputBg}) no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .inputLeft {
        width: 11rem;
        background: none;
        border: none;
        outline: none;
        color: #5697cc;
      }
      .inputLeft::placeholder {
        color: #5697cc;
      }
      .inputRight {
        width: 6rem;
        font-size: 1.4rem;
        color: #fff;
        text-align: center;
        cursor: pointer;
      }
    }
  }
`;
export const CenterBottomItemYJKZ = styled.div`
  width: 100%;
  height: 49%;
  background: url(${smallBG}) no-repeat;
  background-size: 100% 100%;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 26.49%;
    font-size: 2rem;
    margin-left: 5.5rem;
    font-weight: bold;
    line-height: 200%;
    .text-title {
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #79c5ff 0%,
        #ffffff 59.8388671875%,
        #ffffff 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .switchBox {
      width: 10rem;
      height: 98%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-right: 2rem;
      transform: translateY(1px);
      .dun {
        font-size: 1.6rem;
        cursor: pointer;
        width: 4.4rem;
        height: 4rem;
        text-align: center;
      }
      .active {
        background: url(${active}) no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
      .unactive {
        background: url(${unactive}) no-repeat;
        background-size: 100% 100%;
        color: #5c6e7f;
      }
    }
  }
  .yyz-content {
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: space-between;
    align-content: space-around;
    flex-wrap: wrap;
    .yyz-item-one {
      width: 12rem;
      height: 8.6rem;
      font-size: 2rem;
      text-align: center;
      background: url(${dizhuo2}) no-repeat;
      background-size: 100% 100%;
      margin: 1rem 3rem 0rem 3rem;
      position: relative;
      .yyz-title {
        font-size: 1.2rem;
        color: #92b2d0;
        position: absolute;
        top: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .yyz-value {
        width: 100%;
        font-size: 2.8rem;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(0deg, #ffffff 0%, #01befc 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .yyz-item {
      width: 55%;
      height: 50%;

      .yyz-title {
        font-size: 1.4rem;
        color: #92b2d0;
        /* margin: 0.5rem 2rem 1rem 0.3rem; */
      }
      .inputBox {
        width: 18rem;
        height: 4.4rem;
        background: url(${inputBg}) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .inputLeft {
          width: 11rem;
          background: none;
          border: none;
          outline: none;
          color: #5697cc;
        }
        .inputLeft::placeholder {
          color: #5697cc;
        }
        .inputRight {
          width: 6rem;
          font-size: 1.4rem;
          color: #fff;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
`;
export const CenterBottomItemJLM = styled.div`
  width: 100%;
  height: 49%;
  background: url(${smallBG}) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  .jlm_left,
  .jlm_right {
    width: 48.2%;
    height: 100%;
    background: url(${lastSmallBG}) no-repeat;
    background-size: 100% 100%;
    .title {
      height: 22.98%;
      font-size: 2rem;
      margin-left: 5.5rem;
      font-weight: bold;
      line-height: 200%;
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #79c5ff 0%,
        #ffffff 59.8388671875%,
        #ffffff 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      align-items: center;
    }
    .btn-box {
      width: 100%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 1.6rem;
      .btn {
        width: 9rem;
        height: 4rem;
        background: url(${btnL}) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #fdffff;
      }
      .btn:hover {
        background: url(${btnG}) no-repeat;
        background-size: 100% 100%;
        color: #92b2d0;
      }
      .bigbtn {
        width: 18rem;
        background: url(${bigbtn}) no-repeat;
        background-size: 100% 100%;
      }
      .bigbtn:hover {
        background: url(${bigbtn2}) no-repeat;
        background-size: 100% 100%;
      }
    }
    .rfj-xinxi,
    .zm-xinxi {
      height: 50%;
      display: flex;
      align-items: center;
    }
  }
`;

export const CBBottomBox = styled.div`
  width: 49%;
  background: url(${changKuang}) no-repeat;
  background-size: 100% 100%;
  font-size: 2rem;
  font-weight: bold;

  .cb_bottom_text-title {
    height: 12%;
    color: #ffffff;
    background: linear-gradient(
      0deg,
      #79c5ff 0%,
      #ffffff 59.8388671875%,
      #ffffff 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 5.5rem;
    display: flex;
    align-items: center;
  }
  .cb_bottom_yyz-content {
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: space-between;
    /* align-content: space-around; */
    flex-wrap: wrap;
       .shishizhuangzailianghe{
        flex: 1;
        display: flex;
        justify-content: center;

        font-size: 4rem;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(0deg, #ffffff 0%, #01befc 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top: 2rem;
        
      }
    .yyz-item-one {
      width: 12rem;
      height: 8.6rem;
      font-size: 2rem;
      text-align: center;
      background: url(${dizhuo2}) no-repeat;
      background-size: 100% 100%;
      margin: 1rem 3rem 0rem 3rem;
      position: relative;
      .yyz-title {
        font-size: 1.2rem;
        color: #92b2d0;
        position: absolute;
        top: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .yyz-title-shishi {
        font-size: 1.2rem;
        color: #92b2d0;
        position: absolute;
        top: 2rem;
        left: 50%;
        transform: translateX(-50%);
      }
   
      .yyz-value {
        width: 100%;
        font-size: 2.8rem;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(0deg, #ffffff 0%, #01befc 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .yyz-item {
      width: 55%;
      height: 100%;

      .yyz-title {
        font-size: 1.4rem;
        color: #92b2d0;
      }
      .inputBox {
        width: 18rem;
        height: 4.4rem;
        background: url(${inputBg}) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .inputLeft {
          width: 11rem;
          background: none;
          border: none;
          outline: none;
          color: #5697cc;
        }
        .inputLeft::placeholder {
          color: #5697cc;
        }
        .inputRight {
          width: 6rem;
          font-size: 1.4rem;
          color: #fff;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
`;
